<template>
  <el-dialog
    custom-class="common-dialog hcs-dialog"
    :visible.sync="dialogVisible"
    width="700px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="换粗纱明细"
    destroy-on-close
    center
    @close="closeDialog"
  >
    <div class="grid2">
      <div class="machine1" v-for="(item, i) in hcsList" :key="i">
        <span>细纱机：</span>
        <div class="app-input">
          <el-row type="flex" align="middle">
            <el-input
              class="hcs"
              size="small"
              v-model="item.devSn"
              placeholder="请输入机台"
              @change="e => updateHsds(item, i)"
            >
              <template #prepend>#</template>
            </el-input>
            <span style="margin: 0 4px">第</span>
            <el-input
              size="small"
              v-model="item.hcsds"
              placeholder="请输入"
              @change="e => updateHsds(item, i)"
            >
              <template #append>段</template></el-input
            >
          </el-row>
        </div>
        <el-button
          type="text"
          @click="delRow(i)"
          style="color:rgb(245,108,108);margin-left:10px;font-size:16px"
          ><i class="el-icon-remove-outline"
        /></el-button>
      </div>
    </div>
    <el-button type="text" @click="addRow"
      ><i
        class="el-icon-plus"
        style="font-weight:bold;margin-right:4px"
      />添加换粗纱</el-button
    >
    <div class="btn-list">
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCsDs, updateCsDs } from '@/api/dispatch';
export default {
  data() {
    return {
      dialogVisible: false,
      hcsList: [],
      hcsSource: [],
      sameBcFlag: '0'
    };
  },
  methods: {
    show(search, date, sameBcFlag) {
      this.search = Object.assign({}, search);
      this.date = date;
      this.sameBcFlag = sameBcFlag;
      this.dialogVisible = true;
      this.getCsDs();
    },
    // 查询换粗砂总ds
    async getCsDs() {
      let params2 = {
        bc: this.search.bc,
        cj: this.search.cj,
        gongxu: '细纱',
        org: this.search.org,
        time: this.date,
        sameBcFlag: this.sameBcFlag
      };
      const res2 = await getCsDs(params2);
      if (res2.code == 1) {
        let data2 = res2.data;
        this.hcsList = data2.details;
        this.hcsSource = this.$_.cloneDeep(data2.details);
      }
    },
    // 换纱 single
    async updateHsds(val, index) {
      if (val.devSn && val.hcsds) {
        let old = this.hcsSource[index];
        let params = {
          bc: this.search.bc,
          cj: this.search.cj,
          devSn: val.devSn,
          id: val.id,
          flag: val.id ? '3' : '1',
          gongxu: '细纱',
          hcsds: val.hcsds,
          pre_hcsds: val.id ? old.hcsds : null,
          org: this.search.org,
          time: this.date,
          sameBcFlag: this.sameBcFlag
        };
        const res = await updateCsDs(params);
        if (res.code == 1) {
          this.getCsDs();
          this.$message.success('修改成功');
        }
      }
    },
    addRow() {
      this.hcsList.push({ devSn: '', hcsds: '' });
    },
    // 删除单个
    async delRow(index) {
      let row = this.hcsList[index];
      let params = {
        bc: this.search.bc,
        cj: this.search.cj,
        devSn: row.devSn,
        id: row.id,
        flag: '2',
        gongxu: '细纱',
        hcsds: row.hcsds,
        org: this.search.org,
        time: this.date,
        sameBcFlag: this.sameBcFlag
      };
      const res = await updateCsDs(params);
      if (res.code == 1) {
        this.getCsDs();
        this.$message.success('修改成功');
      }
    },
    closeDialog() {
      this.hcsList = [];
      this.$emit('getData', this.sameBcFlag);
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.hcs-dialog {
  .machine1 .app-input {
    width: 205px;
    margin: 0;
    display: inline-block;
    .hcs .el-input__inner {
      padding: 0 4px;
      border-left: none;
    }
    .el-input__inner {
      padding: 0 4px;
    }
    .el-input__inner:focus {
      border-color: #dcdfe6;
    }
    .el-input-group__prepend {
      padding: 0;
      padding-left: 4px;
      background: #fff;
      border-right: none;
    }
    .el-input-group__append {
      padding: 0 10px;
      background: #fff;
      color: #292b3d;
      border-left: none;
      padding-left: 0;
    }
    .el-input:last-child {
      .el-input__inner {
        border-right: none;
      }
    }
  }
}
</style>
